<script>
import apiFlow from "@/pages/v1/flow/Flow/js/apiFlow";
import TitleA from "@/comps/comm/TitleA.vue";
import design_func from "@/pages/v1/flow/Flow/ds/design_func";
import design_point_func from "@/pages/v1/flow/Flow/ds/design_point_func";
import apiEmp from "@/pages/v1/erp/Emp/js/apiEmp";
import apiDepartment from "@/pages/v1/erp/Department/js/apiDepartment";
import draggable from "vuedraggable";

export default {
  name: "ez-flow-design",
  components: {TitleA,draggable},
  data() {
    let context = design_func()
    return {
      id: 0,
      model: null,
      points: context.points,
      context:context,

      //上游节点下游节点的编辑
      curPoint: {
        key:""
      },
      editorUpdateKey:"",

      //editor
      // editTab:"form",
      editTab:"info",
    }
  },
  mounted() {
    this.id = this.$route.query.id * 1
    this.getData()
    this.init()
  },
  methods: {
    addFormItem(){
      this.curPoint.form.push(this.context.createEmptyFormItem())
    },

    addNext(){
      this.curPoint.next.push(this.context.createEmptySlot())
    },

    searchUser(){
      apiEmp.findBy({
        _where:{
          _or:[
            {name__regex:this.curPoint.auth.searchUserName},
            {code__regex:this.curPoint.auth.searchUserName},
          ],
        }
      },res=>{
        this.curPoint.auth.apiResultUser=res
        setTimeout(()=>{
          this.curPoint.auth.apiResultUser = []
        },10000)
      })
    },

    searchDepartment(){
      apiDepartment.findBy({
        _where:{
          _or:[
            {name__regex:this.curPoint.auth.searchDepartmentName},
          ],
        }
      },res=>{
        this.curPoint.auth.apiResultDepartment=res
        setTimeout(()=>{
          this.curPoint.auth.apiResultDepartment = []
        },10000)
      })
    },

    editThis(row){
      this.curPoint = row
      this.editorUpdateKey = Math.random()
    },
    getData() {
      apiFlow.find(this.id, res => {
        this.model = res.data
        if (this.model.points.length === 0)return
        this.context.points = res.data.points
        for (let i = 0; i < this.context.points.length; i++) {
          this.context.points[i] = {...this.context.points[i],...design_point_func}
        }
        this.editThis(this.context.points[0])
      })
    },
    init() {
      // this.points = design_func.points
    },
    addPoint() {
      this.context.addNewPoint()
    },
    save(){
      console.log(this.context.points)
      this.model.points = this.context.points
      apiFlow.save( this.model, res => {
        this.$toast.success(res.message)
      })
    }
  }

}
</script>

<template>
  <div>
    <div class="mar5 pad5 mdui-color-blue-50 round3">
      <title-a>流程设计</title-a>
      <div class="flex-r ">
        <div class="topBox flcc">
          <mu-button color="primary" icon @click="goback(-1)">
            <mu-icon value="arrow_back"></mu-icon>
          </mu-button>
        </div>
        <div class="topBox flcc">
          <mu-button color="primary" icon @click="addPoint">
            <mu-icon value="add"></mu-icon>
          </mu-button>
        </div>
        <div class="topBox flcc">
          <mu-button color="primary" icon @click="save">
            <mu-icon value="save"></mu-icon>
          </mu-button>
        </div>
      </div>
    </div>
    <div class="flex-r flex-fill" >
      <div style="width: 220px;" class="">
        <mu-ripple @click="editThis(context.points[pointIndex])" class="flrc bcf mar5 pos-r pad3 round3"
                   :class="{'mdui-color-blue-600':point.key === curPoint.key}"
                   v-for="(point,pointIndex) in context.points" :key="point.key">
          <div class="flex1">
            <div>{{point.name}}</div>
          </div>
          <div>
            <mu-button @click="context.deletePoint(point.key)" color="error" small icon>
              <mu-icon value="close"></mu-icon>
            </mu-button>
          </div>
        </mu-ripple>
      </div>
      <div ref="DataBox" style="width: 660px;height: 660px;overflow: scroll" class="designBox">
        <draggable v-model="context.points" :options="{handle:'.box'}">
          <div v-for="(row,index) in context.points" :key="index"
               class=" designRow mar5">
            <div class="box round3 ofh flex-c">
              <div class="  tac flrc padlr3" style="height: 40px;"
                   :class="{'mdui-color-blue-100':row.key !== curPoint.key,'mdui-color-blue-600':row.key === curPoint.key}">
                <div class="bcf padlr5 padtb1 round5 fwb c11">{{index+1}}</div>
                <div class="flex1">{{ row.name }}</div>
                <div>
                  <mu-button @click="editThis(context.points[index])" small icon>
                    <mu-icon :value="row.key === curPoint.key?'flag':'edit'"></mu-icon>
                  </mu-button>
                </div>
              </div>
              <div class="pad5">
                <title-a>流转提示</title-a>
                <div class="flex-r mart5">
                  <div class="flrc mdui-color-cyan-100 marr5 round3" v-for="(item,nextIndex) in row.next" :key="nextIndex">
                    <div class="mdui-color-cyan-800 padlr3 round3">{{item.condition}}</div>
                    <div class="padl3 padr10">{{context.getPointByKey(item.key).name}}</div>
                  </div>
                </div>
                <title-a class="mart10">权限单位</title-a>
                <div class="mart5">
                  <mu-chip class="small" delete v-for="(user,userIndex) in row.auth.user"  :key="userIndex"
                           @delete="row.delUser(user)" color="success"
                  >{{user.name}}</mu-chip>
                  <mu-chip class="small" delete v-for="(department,departmentIndex) in row.auth.department"  :key="`dept_${departmentIndex}`"
                           @delete="row.delDepartment(department)" color="purple500"
                  >{{department.name}}</mu-chip>
                </div>
              </div>
            </div>
          </div>
        </draggable>

      </div>
      <div class="flex1 marl5" :key="editorUpdateKey">
        <div v-if="!!curPoint.key">
          <mu-tabs :value.sync="editTab" inverse>
            <mu-tab value="info">基础信息</mu-tab>
            <mu-tab value="auth">权限管理</mu-tab>
            <mu-tab value="form">信息采集</mu-tab>
          </mu-tabs>
          <div v-show="editTab === 'info'">
            <!-- ##基础信息-->
            <div class="bcf mart5 round3 pad3">
              <title-a>审批节点</title-a>
              <div class="pad10">
                <mu-row>
                  <mu-col :span="12"><mu-text-field label="审批节点名称" label-float v-model="curPoint.name" full-width></mu-text-field></mu-col>
                </mu-row>
                <div class="flex-r">
<!--                  <mu-radio v-model="curPoint.type" value="CAN_EDIT" label="允许编辑"></mu-radio>-->
<!--                  <mu-radio v-model="curPoint.type" value="过程节点" label="过程节点"></mu-radio>-->
<!--                  <mu-radio v-model="curPoint.type" value="终止节点" label="终止节点"></mu-radio>-->
                  <mu-col :span="4"><mu-switch v-model="curPoint.lock" label="信息锁定"></mu-switch></mu-col>
                  <mu-col :span="4"><mu-switch v-model="curPoint.canCancel" label="允许取消"></mu-switch></mu-col>
                  <mu-col :span="4"><mu-switch v-model="curPoint.canFinish" label="允许完结"></mu-switch></mu-col>
                </div>
              </div>
            </div>

            <!-- ##锚点管理-->
            <div class="bcf mart5 round3 pad3">
              <title-a>
                <div class="flrc">
                  <div class="flex1">锚点管理</div>
                  <div><mu-button icon small @click="addNext"><mu-icon value="add"></mu-icon></mu-button></div>
                </div>
              </title-a>
              <div class="pad10 mar5 bdda tac c12" v-if="curPoint.next.length === 0">
                暂无数据,默认直接跳转下一节点
              </div>

              <div class="flrc" v-for="(row,rowIndex) in curPoint.next" :key="rowIndex">
                <div class="flex1">
                  <mu-select style="width: 120px;" v-model="row.key" @change="row.name = context.getPointByKey(row.key).name" label="选择节点" label-float>
<!--                    <mu-option value="" label="选择节点" ></mu-option>-->
                    <mu-option :key="point.id" :value="point.key" :label="point.name" v-for="point in context.points"></mu-option>
                  </mu-select>
                </div>
                <div class="flex1 padlr3">
                  <mu-select style="width: 120px;" v-model="row.condition" label="选择条件" label-float>
                    <mu-option value="通过" label="通过"></mu-option>
                    <mu-option value="驳回" label="驳回"></mu-option>
                    <mu-option value="取消" label="取消"></mu-option>
                    <mu-option value="完成" label="完成"></mu-option>
                  </mu-select>
                </div>
<!--                <div class="flex1">-->
<!--                  <mu-switch v-model="row.isDefault" label="是否默认" label-float></mu-switch>-->
<!--                </div>-->
                <div class="flex1">
                  <mu-text-field v-model="row.note" full-width label="备注" label-float></mu-text-field>
                </div>
                <div>
                  <mu-button @click="curPoint.deleteNext(row)" color="error" small icon><mu-icon value="close"></mu-icon></mu-button>
                </div>
              </div>
<!--              {{curPoint.next}}-->
            </div>
          </div>


          <div v-show="editTab === 'auth'">

            <!-- ##人员管理-->
            <div class="bcf mart5 round3 pad3">
              <title-a>人员权限</title-a>
              <div class="pad10">
                <div>
                  <mu-chip delete v-for="(user,userIndex) in curPoint.auth.user"  :key="userIndex"
                           @delete="curPoint.delUser(user)" color="success"
                  >{{user.name}}</mu-chip>
                </div>
                <mu-text-field label="人员检索"
                               label-float @keydown.enter="searchUser" @change="searchUser" v-model="curPoint.auth.searchUserName" full-width
                               action-icon="search"
                ></mu-text-field>
                <div>
                  <div>
                    <mu-button color="success" small v-for="(user,userIndex) in curPoint.auth.apiResultUser" :key="userIndex"
                               @click="curPoint.addUser(user)" >{{user.name}}<mu-icon value="add"></mu-icon></mu-button>
                  </div>
                </div>
              </div>
            </div>

            <!-- ##部门管理-->
            <div class="bcf mart5 round3 pad3">
              <title-a>部门权限</title-a>
              <div class="pad10">
                <div>
                  <mu-chip delete v-for="(department,departmentIndex) in curPoint.auth.department"  :key="departmentIndex"
                           @delete="curPoint.delDepartment(department)" color="purple500"
                  >{{department.name}}</mu-chip>
                </div>
                <mu-text-field label="部门检索"
                               label-float @keydown.enter="searchDepartment" @change="searchDepartment" v-model="curPoint.auth.searchDepartmentName" full-width
                               action-icon="search"
                ></mu-text-field>
                <div>
                  <div>
                    <mu-button color="purple500" small v-for="(department,departmentIndex) in curPoint.auth.apiResultDepartment" :key="departmentIndex"
                               @click="curPoint.addDepartment(department)" >{{department.name}}<mu-icon value="add"></mu-icon></mu-button>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div v-show="editTab === 'form'">
            <!-- ##信息采集-->
            <div class="bcf mart5 round3 pad3">
              <title-a>
                <div class="flrc">
                  <div class="flex1">采集字段</div>
                  <div><mu-button icon small @click="addFormItem"><mu-icon value="add"></mu-icon></mu-button></div>
                </div>
              </title-a>
              <div class="pad10">
                <div v-for="(item,itemIndex) in curPoint.form" class="flrc">
                  <div class="flex1">
                    <mu-text-field style="width: 180px;" v-model="item.name" label="字段名称" label-float></mu-text-field>
                  </div>
                  <div class="flex1">
                    <mu-text-field style="width: 120px;" v-model="item.key" label="KEY" label-float></mu-text-field>
                  </div>
                  <div class="flex1">
                    <mu-select style="width: 120px;" v-model="item.type" label="类型" label-float>
                      <mu-option value="TEXT" label="文本"></mu-option>
                    </mu-select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.topBox {
  width: 48px;
  height: 48px;
}

.designBox .designRow {
  min-height: 120px;
}

.designBox .designRow .box {
  //width: 420px;
  min-height: 120px;
  background: #ffffff;
}

.designBox .designRow .box .title {
  font-size: 12px;
  line-height: 24px;
  height: 24px;
}

.small{
  scale: 0.85;
}

</style>